<template>
  <div>子组件</div>
  <h2>{{ iconName }}, {{ title }}</h2>

  <button @click="handleClick">事件触发按钮</button>
  <br />
  <div>
    <span> {{ x }},{{ y }} </span>
  </div>
</template>

<script setup>
// 导入普通的js库一样 引入
import { useMouse } from "../composition/mouse";
const { x, y } = useMouse();

// <父组件> ---> <子组件>
// 子组件定义属性, 父组件传入属性

// 并没有import defineProps 这个函数, defineProps是编译器符合
// 对象参数: {}, 负责定义这个组件的参数
// {属性名称: 属性的类型}

// 属性的使用, 在模板里面直接作为ref变量使用: {{ iconName }}, {{ title }}
defineProps({
  iconName: String,
  title: String,
});

// 其中事件的名称可以使用数组来进行定义
// 定义子组件有一个submit事件
const emit = defineEmits(["submit"]);

const handleClick = () => {
  // 子组件触发 submit事件, 使用emit函数来进行触发
  // 第一个参数 事件的名称: submit, 第二参数的事件的数据 { status: "ok" }
  // 我们的子组件 事件的一个生产者, 父组件通过v-on(@) 来订阅这个事件
  emit("submit", { status: "ok" });
};
</script>

<style lang="scss" scoped></style>
